<template>
  <div class="leave-container">
    <van-nav-bar
      class="app-nav-bar"
      title="请假"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs v-model="active">
      <van-tab title="请假记录">
        <van-cell-group
          v-for="item in userList"
          :key="item._id"
        >
          <van-cell
            v-if="item.examine === '审核通过'"
            class="base-info"
            center
            :border='false'
            @click="$router.push(`/leave/cancel?id=${item._id}&rate=${item.rate}`)"
          >
            <div class="name" slot="title">{{ item.message }}</div>
            <div class="name" slot="title">{{ item.type }}</div>
            <van-circle
              v-model="item.rate"
              :rate="item.rate"
              :speed="100"
              :text="item.status === '否' ? '未销假' : '已销假'"
              :stroke-width="60"
            />
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="提交请假">
        <div class="tab_field">
          <van-form input-align="right" @submit="onSubmit">
          <van-field
            readonly
            clickable
            name="picker"
            :value="fieldInfo.type"
            label="请假类型"
            placeholder="点击选择"
            @click="showPicker1 = true"
          />
          <van-popup v-model="showPicker1" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns_type"
              @confirm="onConfirm1"
              @cancel="showPicker1 = false"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="picker"
            :value="fieldInfo.lea_school"
            label="是否离校"
            placeholder="点击选择"
            @click="showPicker2 = true"
          />
          <van-popup v-model="showPicker2" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns_leave"
              @confirm="onConfirm2"
              @cancel="showPicker2 = false"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="picker"
            :value="start_date"
            label="开始时间"
            placeholder=""
            @click="showPicker3 = true"
          />
          <van-popup v-model="showPicker3" position="bottom">
            <van-datetime-picker
            v-model="startDate"
            type="datetime"
            title="选择完整时间"
            @confirm="confirm1"
            :min-date="minDate"
            :max-date="maxDate"
          />
          </van-popup>
          <van-field
            readonly
            clickable
            name="picker"
            :value="end_date"
            label="结束时间"
            placeholder=""
            @click="showPicker4 = true"
          />
          <van-popup v-model="showPicker4" position="bottom">
            <van-datetime-picker
            v-model="endDate"
            type="datetime"
            title="选择完整时间"
            @confirm="confirm2"
            :min-date="minDate"
            :max-date="maxDate"
          />
          </van-popup>
          <van-field
            readonly
            clickable
            name="picker"
            :value="fieldInfo.place"
            label="销假地点"
            placeholder="请选择销假地点"
            @click="showPicker5 = true"
            :rules="[{ required: true, message: '' }]"
          />
          <van-popup v-model="showPicker5" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns_place"
              @confirm="onConfirm3"
              @cancel="showPicker5 = false"
            />
          </van-popup>
          <van-field
            v-model="fieldInfo.sos_mobile"
            name="紧急联系人"
            label="紧急联系人"
            placeholder="紧急联系人电话"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="fieldInfo.message"
            rows="2"
            autosize
            label="请假事由"
            type="textarea"
            maxlength="50"
            placeholder="请详细填写请假事由"
            show-word-limit
            :rules="[{ required: true, message: '' }]"
          />
          <van-button
            class="field-btn"
            type="info"
            block
          >确定保存</van-button>
          </van-form>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { addLeave, getLeave } from '@/api/leave'
export default {
  name: 'leaveIndex',
  components: {},
  props: {},
  data () {
    return {
      active: 0,
      currentRate: 0,
      text: '假期中',
      now_date: new Date().getTime(),

      columns_type: ['事假', '病假', '实习', '科研', '回家', '出差', '其它'],
      showPicker1: false,

      columns_leave: ['是', '否'],
      showPicker2: false,

      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),

      startDate: new Date(),
      showPicker3: false,

      endDate: new Date(),
      showPicker4: false,

      columns_place: ['校本部', '科信学院', '临床医学院', '新校区'],
      showPicker5: false,

      start_date: new Date(new Date().toLocaleDateString()).getTime().toString(),
      end_date: new Date(new Date().toLocaleDateString()).getTime().toString(),

      fieldInfo: {
        name: '',
        mobile: null,
        type: '事假', // 请假类型
        lea_school: '否', // 是否离校
        place: '', // 销假地点
        start_date: null,
        end_date: null,
        sos_mobile: '',
        message: '',
        examine: '审核中', // 审核情况
        status: null, // 是否销假
        rate: 0 // 假期进度
      },
      userList: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getLeaveInfo()
    this.fieldInfo.start_date = new Date().getTime()
    this.fieldInfo.end_date = new Date().getTime()
    const yy = new Date().getFullYear()
    const mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    const h = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
    const m = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
    // const s = new Date().getSeconds()
    this.start_date = yy + '-' + mm + '-' + dd + ' ' + h + ':' + m
    this.end_date = yy + '-' + mm + '-' + dd + ' ' + h + ':' + m
  },
  methods: {
    onConfirm1 (value) {
      this.fieldInfo.type = value
      this.showPicker1 = false
    },
    onConfirm2 (value) {
      this.fieldInfo.lea_school = value
      this.showPicker2 = false
    },
    onConfirm3 (value) {
      this.fieldInfo.place = value
      this.showPicker5 = false
    },
    confirm1 (value) {
      // console.log(value)
      // console.log(new Date(value).getTime())
      this.fieldInfo.start_date = new Date(value).getTime()
      const yy = value.getFullYear()
      const mm = (value.getMonth() + 1) < 10 ? '0' + (value.getMonth() + 1) : value.getMonth() + 1
      const dd = value.getDate() < 10 ? '0' + value.getDate() : value.getDate()
      const h = value.getHours() < 10 ? '0' + value.getHours() : value.getHours()
      const m = value.getMinutes() < 10 ? '0' + value.getMinutes() : value.getMinutes()
      // const s = value.getSeconds()
      this.start_date = yy + '-' + mm + '-' + dd + ' ' + h + ':' + m
      this.showPicker3 = false
    },
    confirm2 (value) {
      // console.log(value)
      this.fieldInfo.end_date = new Date(value).getTime()
      const yy = value.getFullYear()
      const mm = (value.getMonth() + 1) < 10 ? '0' + (value.getMonth() + 1) : value.getMonth() + 1
      const dd = value.getDate() < 10 ? '0' + value.getDate() : value.getDate()
      const h = value.getHours() < 10 ? '0' + value.getHours() : value.getHours()
      const m = value.getMinutes() < 10 ? '0' + value.getMinutes() : value.getMinutes()
      // const s = value.getSeconds()
      this.end_date = yy + '-' + mm + '-' + dd + ' ' + h + ':' + m
      this.showPicker4 = false
    },
    onSubmit () {
      // console.log(this.$store.state.user)
      this.fieldInfo.name = this.$store.state.user.name
      this.fieldInfo.mobile = this.$store.state.user.mobile
      console.log(this.fieldInfo)
      addLeave(this.fieldInfo).then(res => {
        console.log(res)
        this.$toast.success({
          message: '提交成功'
        })
        history.go(-1)
      })
    },
    getLeaveInfo () {
      getLeave(
        {
          mobile: this.$store.state.user.mobile
        }
      ).then(res => {
        console.log(res)
        this.userList = res.data.data
        // console.log(this.now_date)
        // console.log(this.userList[0].start_date)
        // console.log(this.userList[0].end_date)
        this.userList.forEach(item => {
          const value = (this.now_date - item.start_date) / (item.end_date - item.start_date)
          // console.log(this.now_date - item.start_date)
          // console.log(item.end_date - item.start_date)
          // console.log(value)
          if (item.status === '否') {
            if (value >= 1) {
              item.rate = 100
            } else {
              item.rate = value * 100
            }
          }
          console.log(item.rate)
        })
        // console.log(this.userList)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.van-cell {
  border-radius: 10px;
  margin: 10px 0;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}
</style>
